<template>
  <div class="login">
    <div class="mainbox">
      <Index v-if="title ==='login' "></Index>
      <add-user v-if="title ==='adduser' "></add-user>
      <reset v-if="title ==='reset' "></reset>
    </div>
  </div>
</template>

<script>

import AddUser from '../components/Login/AddUser.vue'
import Index from '../components/Login/Login.vue'
import Reset from '../components/Login/Reset.vue'

export default {
  components: { Index, AddUser, Reset },
  data () {
    return {
      title: 'login'
    }
  },
  beforeCreate () {
    this.$bus.$on('title', (data) => {
      this.title = data
    })
  },
  beforeDestroy () {
    this.$bus.$off('title')
  }
}
</script>
<style lang="less" scoped>
.login{
  width: 100vw;
  height: 100vh;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fseopic.699pic.com%2Fphoto%2F40007%2F3158.jpg_wh1200.jpg&refer=http%3A%2F%2Fseopic.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656340522&t=e42b91418d69e86cd31bf6648267676e');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}
.mainbox{
  width:600px;
  height: 400px;
  transform: translate(-50%,-50%);
  position: relative;
  top: 50vh;
  left: 50vw;
}
</style>
